<template>
  <el-dialog :visible.sync="show" :close-on-click-modal="false" width="70%">
    <span slot="title">
      <span>检查项配置：</span>
      <span class="cfg-chk-name">{{ currItem.chkName }}</span>
      <span class="cfg-chk-code">({{ currItem.chkCode }})</span>
    </span>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px" inline v-loading="formLoading">
      <el-form-item label="检查项版本" prop="versionCode">
        <el-select v-model="form.versionCode" placeholder="请选择检查项版本" style="width: 100%" @change="versionChange">
          <el-option v-for="version in versions" :key="version.versionCode" :label="version.versionName" :value="version.versionCode" />
        </el-select>
      </el-form-item>
      <el-form-item prop="chkitemCode" label="检查项">
        <treeselect
          v-model="form.chkitemId"
          :options="treeOptions"
          :normalizer="normalizer"
          @select="selectChkitem"
          :before-clear-all="beforeClearAll"
          style="width: 300px;"
          show-count
          :default-expand-level="5"
          placeholder="选择检查项"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" circle icon="el-icon-plus" @click="addChkitem" style="margin-left: 40px;" />
      </el-form-item>
      <el-form-item label="是否统计">
        <el-switch></el-switch>
      </el-form-item>
      <el-form-item label="计算类型">
        <el-select placeholder="请选择检查项版本" style="width: 100%">
          <el-option label="通用类型" value="version.versionCode1" />
          <el-option label="交付类型" value="version.versionCode" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-divider class="f-title" content-position="left">配置检查项</el-divider>
    <el-table ref="table" :data="submitData.chkitemMappings" size="small" height="calc(100vh - 400px)" v-loading="listLoading">
      <el-table-column label="检查项编码" prop="chkitemCode" show-overflow-tooltip min-width="100" />
      <el-table-column label="检查项名称" prop="chkitemName" show-overflow-tooltip min-width="150" />
      <el-table-column label="版本编码" prop="versionCode" show-overflow-tooltip min-width="100" />
      <el-table-column label="版本名称" prop="versionName" show-overflow-tooltip min-width="150" />
      <el-table-column label="操作" fixed="right" align="center" width="300">
        <template slot-scope="{ $index }">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="saveChkitemCfg">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 添加或修改检查项配置
import Treeselect from '@riophae/vue-treeselect'
import { listChkitem, listVersion } from '@/api/checkScore/cqEval'
import { debounce, flatList2tree } from '@/utils'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getOneInfo, saveItemMapping } from '@/api/checkScore/aoZheChkItem'

export default {
  name: 'EditAZChkitemCfg',
  components: { Treeselect },
  data() {
    return {
      form: {
        chkitemId: '',
        chkitemCode: '',
        chkitemName: '',
        versionCode: '',
        versionName: ''
      },
      rules: {
        versionCode: [{ required: true, message: '请选择检查项版本' }],
        chkitemCode: [{ required: true, message: '请选择检查项' }]
      },
      currItem: {},
      btnLoading: false,
      listLoading: false,
      formLoading: false,
      show: false,
      versions: [],
      treeOptions: [{ chkitemId: '', chkitemName: '主类目', children: [] }],
      submitData: { id: '', chkitemMappings: []}
    }
  },
  created() {
    this.handleQueryDebounce = debounce(this.handleQuery)
  },
  methods: {
    open(item = {}) {
      this.show = true
      this.currItem = item
      this.submitData.id = item.id
      this.submitData.chkitemMappings = []
      this.form.versionCode = ''
      this.form.chkitemId = ''
      this.form.chkitemCode = ''
      this.$nextTick(() => {
        this.getChkitemCfg()
        this.getVersionList()
      })
    },
    /*
    *  删除检查项
    * */
    handleDelete(index) {
      this.submitData.chkitemMappings.splice(index, 1)
    },
    /*
    *  增加检查项
    * */
    addChkitem() {
      if (!this.form.versionCode || !this.form.chkitemCode) {
        this.$message.warning('请选择版本与检查项。')
        return
      }
      if (this.submitData.chkitemMappings.some(chkitem => chkitem.chkitemCode === this.form.chkitemCode)) {
        this.$message.info('检查项已存在。')
      } else {
        this.submitData.chkitemMappings.push({ ...this.form })
      }
    },
    /*
    *  版本选择触发
    * */
    versionChange(val) {
      for (let i = 0; i < this.versions.length; i++) {
        if (this.versions[i].versionCode === val) {
          this.form.versionName = this.versions[i].versionName
          this.form.chkitemId = ''
          this.form.chkitemCode = ''
          this.getChkitem(this.form.versionCode)
        }
      }
    },
    /*
    *  获取版本号列表
    * */
    async getVersionList() {
      this.formLoading = true
      const res = await listVersion({ pageNum: 1, pageSize: 100 }).catch(() => false)
      this.formLoading = false
      if (res === false) return
      this.versions = res.data || []
      if (this.versions.length > 0 && this.versions[0].versionCode) {
        const version = this.versions.find(item => item.isEnable === 1)
        if (version) {
          this.form.versionCode = version.versionCode
          this.form.versionName = version.versionName
          this.getChkitem(version.versionCode)
        }
      }
    },
    /*
    *  获取检查项
    * */
    async getChkitem(versionCode) {
      const opt = { versionCode }
      this.formLoading = true
      const res = await listChkitem(opt).catch(() => false)
      this.formLoading = false
      if (res === false) return
      const data = res.data || []
      const treeData = flatList2tree(data, { id: 'chkitemId' })
      this.treeOptions = [{ chkitemId: '', chkitemName: '主类目', children: treeData }]
    },
    /*
    *  获取奥哲检查项详情
    * */
    async getChkitemCfg() {
      const { currItem } = this
      this.listLoading = true
      const opt = { chkitemId: currItem.id }
      const res = await getOneInfo(opt).catch(() => false)
      if (res.code === 200) {
        this.submitData.chkitemMappings = res.data.chkitemMappings || []
      }
      this.listLoading = false
      if (res === false) return
    },
    /*
    *  保存配置数据
    * */
    async saveChkitemCfg() {
      this.btnLoading = true
      this.listLoading = true
      await saveItemMapping(this.submitData).catch(() => false)
      this.listLoading = false
      this.btnLoading = false
      this.show = false
    },
    /*
    *  选择中检查项
    * */
    selectChkitem(obj) {
      this.form.chkitemName = obj.chkitemName
      this.form.chkitemCode = obj.chkitemCode
    },
    /*
    *  清除选择
    * */
    beforeClearAll() {
      this.form.chkitemName = ''
      this.form.chkitemCode = ''
      this.form.chkitemId = ''
    },
    normalizer(node) {
      if (!node.children?.length) delete node.children
      return { id: node.chkitemId, label: node.chkitemName, children: node.children }
    }
  }
}
</script>
<style scoped lang="scss">
  .cfg-chk-name {
    margin-left: 10px;
    font-weight: bold;
    font-size: 15px;
  }
  .cfg-chk-code {
    font-weight: bold;
    color: #909399;
    margin-left: 10px;
    font-size: 16px;
  }
.color-picker {
  position: absolute;
  z-index: 1;
  opacity: 0;
}
.f-title {
  .el-divider__text {
    color: #409eff;
    font-weight: bold;
  }
}
</style>
